<template>
  <el-main style="padding: 0 0 20px;overflow: visible;">
    <el-container class="config-page panel-block">
      <el-header class="sa-header">
        <el-tabs class="sa-tabs" v-model="configType">
          <el-tab-pane v-for="c in configList" :key="c" :label="c.label" :name="c.api"></el-tab-pane>
        </el-tabs>
      </el-header>
      <!--   电商   -->
      <commerce v-if="configType === 'commerce'"></commerce>
      <!--   团购   -->
      <purchase v-if="configType === 'purchase'"></purchase>
      <!--   鲸囍   -->
      <surprise v-if="configType === 'surprise'"></surprise>
      <!--   外卖   -->
      <takeaway v-if="configType === 'takeaway'"></takeaway>
    </el-container>
  </el-main>
</template>

<script setup>
  import { ref } from 'vue';
  import commerce from './commerce/index.vue'
  import purchase from './purchase/index.vue'
  import surprise from './surprise/index.vue'

  import takeaway from './takeaway/index.vue'

  const configType = ref('commerce');

  const configList = [
    { label: '电商商家', api: 'commerce' },
    { label: '团购商家', api: 'purchase' },
    { label: '鲸囍商家', api: 'surprise' },

    // { label: '外卖商家', api: 'takeaway' },
  ];
</script>

<style scoped lang="scss">
</style>